<template>
  <div>
    <div>
      <StaticticsPagination layout="prev, pager, next" :total="100" />
      <GradeSelect v-model="value1" />
      <el-button type="primary" @click="go()">导出报告</el-button>
    </div>
    <StatisticsItem title="综合测评完成情况" subtitle="反应学生的当前生涯测评完成度">
      <div slot="graph">
        <CirclePie cid="1" />
      </div>
    </StatisticsItem>
    <StatisticsItem title="单项测试类型结果人数比" subtitle="反应学生的当前生涯测评完成度">
      <div slot="graph">
        <BarYCategoryStack cid="1" :y-data="[]" />
      </div>
    </StatisticsItem>
    <StatisticsItem title="推荐专业结果排行" subtitle="反应学生的当前生涯测评完成度">
      <div slot="graph">
        <LinearGradientBar cid="2" :data="LinearGradientData" :opacity="0.7" />
      </div>
    </StatisticsItem>
  </div>
</template>

<style scoped>
  h2>span {
    color: #8c939d;
    font-size: 12px;
  }
</style>

<script>
// import LineChart from '../../components/Chart/line'
// import RadarChart from '../../components/Chart/radar'
// import PieChart from '../../components/Chart/pie'
import CirclePie from '../../components/Chart/CirclePie'
import BarYCategoryStack from '../../components/Chart/BarYCategoryStack'
import LinearGradientBar from '../../components/Chart/LinearGradientBar'
import StatisticsItem from './components/statistics-item'
import GradeSelect from './components/grade-select'
import StaticticsPagination from './pagination'
export default {
  components: {
    // LineChart: LineChart,
    // RadarChart: RadarChart,
    StaticticsPagination: StaticticsPagination,
    LinearGradientBar: LinearGradientBar,
    GradeSelect: GradeSelect,
    CirclePie: CirclePie,
    StatisticsItem: StatisticsItem,
    BarYCategoryStack: BarYCategoryStack
    // PieChart: PieChart
  },
  data() {
    return {
      LinearGradientData: [
        {
          value: 1,
          label: '公共管理类'
        },
        {
          value: 2,
          label: '公共管理类1'
        },
        {
          value: 3,
          label: '公共管理类2'
        },
        {
          value: 4,
          label: '公共管理类3'
        },
        {
          value: 5,
          label: '公共管理类4'
        }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: ''
    }
  },
  methods: {
    go() {
      this.$router.push('/statistics/career/complex')
    }
  }
}
</script>
